<template>
    <div style="display: flex;width: 100%;height: 100vh; ">
        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 130px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 消息文字 -->
                    <div :style='样式1'>
                        <h4>消息文字 : </h4>
                        <spen :style='样式2'>英:message,类型:string / VNode / Function,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.message' size='small' @change="提交改变">
                            <el-radio label="我是消息啊">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 消息类型 -->
                    <div :style='样式1'>
                        <h4>消息类型 : </h4>
                        <spen :style='样式2'>英:type,类型:enum,默认:info</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.type' size='small' @change="提交改变">
                            <el-radio label="success">成功 </el-radio>
                            <el-radio label="warning">警告 </el-radio>
                            <el-radio label="info">信息 </el-radio>
                            <el-radio label="error">错误 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 自定义图标，该属性会覆盖 type 的图标。 -->
                    <div :style='样式1'>
                        <h4>自定义图标，该属性会覆盖 type 的图标。 : </h4>
                        <spen :style='样式2'>英:icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;margin-top: 10px;'><el-radio-group v-model='属性.icon'
                            size='small' @change="提交改变">
                            <el-radio :label="Edit"><el-button size="small" :icon="Edit">编辑</el-button></el-radio>
                            <el-radio :label="Share"><el-button size="small" :icon="Share">共享</el-button></el-radio>
                            <el-radio :label="Search"><el-button size="small" :icon="Search">搜索</el-button></el-radio>
                            <el-radio :label="Delete"><el-button size="small" :icon="Delete">删除</el-button></el-radio>
                            <el-radio :label="Upload"><el-button size="small" :icon="Upload">下载</el-button></el-radio>
                            <el-radio :label=null>无 </el-radio>
                        </el-radio-group></div>
                    <!-- 是否将 message 属性作为 HTML 片段处理 -->
                    <div :style='样式1'>
                        <h4>是否将 message 属性作为 HTML 片段处理 : </h4>
                        <spen :style='样式2'>英:dangerouslyUseHTMLString,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.dangerouslyUseHTMLString'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 自定义类名 -->
                    <div :style='样式1'>
                        <h4>自定义类名 : </h4>
                        <spen :style='样式2'>英:customClass,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.customClass'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 显示时间，单位为毫秒。 设为 0 则不会自动关闭 -->
                    <div :style='样式1'>
                        <h4>显示时间，单位为毫秒。 设为 0 则不会自动关闭 : </h4>
                        <spen :style='样式2'>英:duration,类型:number,默认:3000</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.duration' size='small' @change="提交改变">
                            <el-radio label=3000>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示关闭按钮 -->
                    <div :style='样式1'>
                        <h4>是否显示关闭按钮 : </h4>
                        <spen :style='样式2'>英:showClose,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.showClose' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 文字是否居中 -->
                    <div :style='样式1'>
                        <h4>文字是否居中 : </h4>
                        <spen :style='样式2'>英:center,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.center' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 关闭时的回调函数, 参数为被关闭的 message 实例 -->
                    <div :style='样式1'>
                        <h4>关闭时的回调函数, 参数为被关闭的 message 实例 : </h4>
                        <spen :style='样式2'>英:onClose,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.onClose' size='small' @change="提交改变">
                            <el-radio label="关闭时的回调函数">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Message 距离窗口顶部的偏移量 -->
                    <div :style='样式1'>
                        <h4>Message 距离窗口顶部的偏移量 : </h4>
                        <spen :style='样式2'>英:offset,类型:number,默认:16</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.offset' size='small' @change="提交改变">
                            <el-radio label=50>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 设置 message 的根元素，默认为 document.body -->
                    <div :style='样式1'>
                        <h4>设置 message 的根元素，默认为 document.body : </h4>
                        <spen :style='样式2'>英:appendTo,类型:string / HTMLElement,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.appendTo'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 合并内容相同的消息，不支持 VNode 类型的消息 -->
                    <div :style='样式1'>
                        <h4>合并内容相同的消息，不支持 VNode 类型的消息 : </h4>
                        <spen :style='样式2'>英:grouping,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.grouping' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 重复次数，类似于 Badge 。当和 grouping 属性一起使用时作为初始数量使用 -->
                    <div :style='样式1'>
                        <h4>重复次数，类似于 Badge 。当和 grouping 属性一起使用时作为初始数量使用 : </h4>
                        <spen :style='样式2'>英:repeatNum,类型:number,默认:1</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.repeatNum' size='small' @change="提交改变">
                            <el-radio label=2>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                        <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);color: aliceblue;">-------触发的事件 -----</h2>
                    <!-- 关闭当前的 Message -->
                    <div :style='样式1'>
                        <h4>关闭当前的 Message : </h4>
                        <spen :style='样式2'>英:close,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.close'
                            size='small' @change="提交改变">
                            <el-radio label="关闭当前的Message回调">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-button  :round=true size='small' type='primary'  @click="消息提示" style="margin-top: 20px;" >消息提示</el-button>
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示" style="width: 98%;margin-top: 50px;"/>
        </div>
    </div>
</template>
<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import{getCurrentInstance} from 'vue'

const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 =proxy.router

const 消息提示=()=>{
	ElMessage(属性.value)
}

const 代码 = ref('')
const 提交改变=async()=>{
    let 结果=await 提交方法("组件修改",组件名.value,属性.value,事件.value)
    代码.value=结果
}

const 组件名 = ref('消息提示')
const 属性 = ref({
})

const 事件 = ref({
})

const 重置组件=()=>{
    let 原生属性 = {
    }
    属性.value=原生属性

    let 原生事件 = {
    }
    事件.value=原生事件
    提交改变()
}

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')

</script>
<style  scoped>

</style>
